
export default class DomUtil{
    constructor(viewer){
        this.domSet =new Set();
        this.viewer =viewer;
        this.tableDiv =undefined;
        this.htmlOverlay =undefined;
    }
    createHtmlOverlay(degrees,innerHtml){
        if(this.htmlOverlay){
            document.body.removeChild(this.htmlOverlay);
        }
        this.htmlOverlay =document.createElement("div");
        this.htmlOverlay.classList.add('info-popUp')
        this.htmlOverlay.innerHTML =innerHtml;
        let scratch =new Cesium.Cartesian2();
        this.viewer.scene.preRender.addEventListener(()=>{
            let position =Cesium.Cartesian3.fromDegrees(degrees.lng,degrees.lat,0);
            let canvasPosition =this.viewer.scene.cartesianToCanvasCoordinates(position,scratch);
            if(Cesium.defined(canvasPosition)){
                this.htmlOverlay.style.top =canvasPosition.y + "px";
                this.htmlOverlay.style.left =canvasPosition.x + "px";
            }
        })
        document.body.appendChild(this.htmlOverlay);
    }

    createDivElement(classList){
        let div =document.createElement("div");
        classList.forEach((item)=>div.classList.add(item));
        document.body.appendChild(div)
        this.domSet.add(div);
        return div;
    }
    removeElement(element){
        if(element){
            this.tableDiv =undefined;
            this.domSet.delete(element)
            document.body.removeChild(element);
        }

    }
    createTable(properties){
        if(this.tableDiv){
            this.removeElement(this.tableDiv);
        }
        this.tableDiv =document.createElement("div");
        this.tableDiv.classList.add('infoPanel-right-top');
        let panel =document.createElement("p");
        panel.classList.add('info-close');
        panel.innerText ='X';
        panel.addEventListener("click",(e)=>{this.removeElement(this.tableDiv)});
        // panel.classList.add('');
        let table =document.createElement("table");
        table.classList.add('info-table');
        // this.table.classList.add('infoPanel-right-top');
        properties.forEach((item)=>{
            let tr =document.createElement("tr");
            let td =document.createElement("td");
            let td2 =document.createElement("td");
            let txt =document.createTextNode(item.name);
            let txt2 =document.createTextNode(item.value);
            td.appendChild(txt);
            td2.appendChild(txt2);
            tr.appendChild(td);
            tr.appendChild(td2);
            // if(index%2 ==0){
            //     tr.style.backgroundColor ="red";
            // }
            table.appendChild(tr);
        })
        table.setAttribute('border',1);
        this.tableDiv.appendChild(panel);
        this.tableDiv.appendChild(table);
        document.body.appendChild(this.tableDiv);
        this.domSet.add(this.tableDiv);
        // return table;
    }
    clear(){
        this.domSet.forEach((element)=>{this.removeElement(element)});
    }
}

